<template>
	<view class="content">
		<view class="card">
			<view class="top">
				<image :src="$showImg('/images/demo/wan.png')"></image>
				<view class="status">转赠成功</view>
				<view class="desc">
					焕贝
					<text class="money">{{detail.money}}</text>
					手续费
					<text class="commission">{{detail.service_price}}</text>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="form">
				<view class="form-item">
					<view class="form-item-label">收款人</view>
					<view class='form-item-value'>
						<view class="mobile">{{detail.receive.mobile}}</view>
						{{detail.receive.nickname}}
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">转赠钱包</view>
				<view class='form-item-value'>{{walletType2text(detail.wallet_type).name}}</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">转赠时间</view>
				<view class='form-item-value'>{{detail.createtime_text}}</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">流水号</view>
				<view class='form-item-value'>{{detail.order_sn}}</view>
			</view>
		</view>

		<view class="to-log" @click="$wanlshop.to('./log')">
			转赠记录
			<image class="right-icon" :src="$showImg('/images/demo/xqu.png')"></image>
		</view>
	</view>
</template>

<script>
	import {
		getDonateDetail,
		walletType2text
	} from '@/API/wallet.js'
	export default {
		data() {
			return {
				id: 0,
				detail: {},

				walletData: {

				},

				walletType2text,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods: {
			getDetail() {
				getDonateDetail({
					donate_id: this.id
				}).then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 20rpx;

		.card {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}

		.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30rpx;

			image {
				width: 128rpx;
				height: 128rpx;
			}

			.status {
				font-weight: 400;
				font-size: 30rpx;
				color: #121212;
				line-height: 36rpx;
			}

			.desc {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;
				line-height: 36rpx;

				.money {
					color: #EB5C20;
				}

				.commission {
					color: #E4AB3A;
				}
			}
		}

		.form {
			display: flex;
			flex-direction: column;

			&-item {
				height: 108rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #ddd;
				// align-items: flex-start;
				align-items: center;
				font-size: 30rpx;

				&-label {
					font-weight: 400;
					color: #888888;
				}

				&-value {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					gap: 30rpx;
					font-weight: 400;
					color: #888888;

					.mobile {
						font-weight: 500;
						color: #121212;
					}
				}
			}
		}

		.to-log {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 10rpx;
			margin: 200rpx auto;
			font-weight: 400;
			font-size: 28rpx;
			color: #888888;
		}
	}
</style>